import { ref, reactive, shallowRef } from 'vue';
import echarts from '@/echarts';
import { PieSeriesOption, EChartsOption } from 'echarts';
import { EChartsType, EChartsCoreOption } from 'echarts/core';
import type { DateItem, LineChartType, MuSelectValueType, intervalMapType } from '../data';

import { getHtmlFontPX, handleChartResize } from '@/utils/base';
import ThemeColor from '@/themeColor';
import { colorList, dateList } from '../config';

export default function (props?: {
	showHandler?: (visible: boolean, type: number, selectValue: MuSelectValueType) => void;
}): LineChartType {
	const chartRef = shallowRef<EChartsType>();
	const container = ref<HTMLDivElement | undefined>();
	const chart = reactive<LineChartType['chart']>({
		selectValue: [4, 8, 9],
		initChart,
		resizeChart,
		extraOption: {}
	});
	/**
	 * @returns 返回option配置
	 */
	const option = {
		color: colorList,
		textStyle: {
			color: '#fff6d1'
		},

		tooltip: {
			trigger: 'item',
			confine: true,
			axisPointer: {
				lineStyle: {
					width: 2,
					color: '#fff6d1'
				}
			},
			className: 'tooltip-review',
			// 通过坐标轴来触发
			textStyle: {
				fontSize: getHtmlFontPX(0.75)
			},
			formatter: '{b} : {c} ({d}%)'
		},
		// containLabel 为 true 的时候：
		// grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
		// 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
		grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '5%',
			containLabel: true
		},
		toolbox: {
			right: !props?.showHandler ? '2%' : '3%',
			iconStyle: {
				borderColor: ThemeColor.chartFontColor
			},
			emphasis: {
				iconStyle: {
					borderColor: '#fff6d1'
				}
			},

			itemGap: Number(getHtmlFontPX(0.25).replace('px', '')),
			itemSize: Number(getHtmlFontPX(0.875).replace('px', ''))
		},
		dataZoom: [
			{
				type: 'inside',
				start: 50,
				end: 100,
				zoomLock: true
			}
		],
		series: []
	};

	/**
	 * 初始化图表
	 * @param container 图表容器id
	 */
	function initChart(nodes: PieSeriesOption['data'], type: keyof intervalMapType): any {
		if (!container.value) return;
		option.series = {
			name: '党支部信息',
			type: 'pie',
			radius: '50%',
			data: [
				{ value: 0, name: '一星党支部' },
				{ value: 0, name: '二星党支部' },
				{ value: 0, name: '三星党支部' },
				{ value: 0, name: '四星党支部' },
				{ value: 0, name: '五星党支部' }
			],
			label: {
				color: '#fff6d1',
				fontSize: getHtmlFontPX(1)
			},
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: '#fff6d1'
				}
			}
		};
		option.series.data.forEach((item, index) => {
			item['value'] = nodes[index + 1];
		});
		chartRef.value = echarts.init(container.value);
		chartRef.value && chartRef.value.setOption(option);
	}

	/**
	 * @description 重新set一下resize后的字体 不然会有偏移
	 */
	function resetFontSize() {
		// 需要重新计算字体不然依旧会有点偏差
		chartRef.value && chartRef.value.setOption(option);
	}

	/**
	 * @description 处理图表resize
	 */
	function resizeChart() {
		if (chartRef.value) {
			handleChartResize(chartRef.value);
			resetFontSize();
		}
	}

	return {
		chart,
		container,
		chartRef
	};
}
